<template>
  <div>
    <el-row>
      <el-dialog v-dialogDrag :visible.sync="visible" :title="title" center :width="width">
        <el-form
          :model="form"
          size="mini"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="流程名" prop="procedureName">
            <el-input v-model="form.procedureName" :placeholder="rules.procedureName[0].message"></el-input>
          </el-form-item>
          <el-form-item label="流程标识" prop="keyName">
            <el-input v-model="form.keyName" :placeholder="rules.keyName[0].message"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="describ">
            <el-input v-model="form.describ" :placeholder="rules.describ[0].message"></el-input>
          </el-form-item>
          <el-form-item label="流程状态" prop="status">
            <el-radio-group v-model="form.status" placeholder="请选择流程状态">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span class="dialog-footer" slot="footer" style="text-align: right!important;">
          <el-button size="mini" @click="visible = false">取 消</el-button>
          <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
          <el-button size="mini" @click="save" type="primary">保 存</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { APPROVAL } from "@/api";

export default {
  components: {
  },
  props: {
    show: { Boolean, default: false },
    value: { Object, default: {} },
    width: { String, default: "30%" },
    title: { String, default: "title" },
    type: {Number,default: 0} // 0 新增 1 编辑 2 查看
  },
  data() {
    return {
      form: { status: 1},
      rules: {
        procedureName: [{ required: true, message: "请输入流程名称", trigger: "blur" }],
        keyName: [{ required: true, message: "请输入流程标识", trigger: "blur" }],
        describ: [
          { required: false, message: "请输入描述", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择流程状态", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", false);
      }
    }
  },
  mounted() {
    this.setOldData(this.value);
  },
  watch: {
  },
  methods: {
    setOldData(data) {
      this.form = this.$newObject(data);
    },
    save() {
      if (this.$validate(this, "ruleForm")) {
        if (this.type ===1) {
          this.update()
          return
        }
        console.log('save')
        APPROVAL.save(this.form).then(res => {
          if (res.code === 200) {
            this.$message.success("保存成功");
            this.$emit('refresh')
          } else {
            this.$message.error(res.message);
          }
          this.$emit("update:show", false);
        });
      }
    },
    update() {
      APPROVAL.update(this.form).then(res => {
        if (res.code === 200) {
          this.$message.success("保存成功");
          this.$emit('refresh')
        } else {
          this.$message.error(res.message);
        }
        this.$emit("update:show", false);
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.setOldData(this.value);
    }
  }
};
</script>
<style lang="scss" scoped>
.small-card {
  ::v-deep .el-card__body {
    padding: 10px;
  }
}

.el-form {
  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }
}
</style>
